<template>
  <div class="list-wrap1">
    <a href="" class="item" v-for="(item, i) in yingyuan" :key="i">
      <div class="title-block">
        <div class="title-line">
          <span>{{ item.nm }}</span>
          <span class="price">{{ item.sellPrice }}</span>
          <span class="q">元起</span>
        </div>
        <div class="line-ellipsis">{{ item.addr }}</div>
        <div class="label-block">
          <div class="allowRefund" v-if="item.tag['allowRefund'] === 1">退</div>
          <div class="endorse" v-if="item.tag['endorse'] === 1">改签</div>
          <div class="snack" v-if="item.tag['snack'] === 1">小吃</div>
          <div class="vipTag" v-if="item.tag['vipTag'] === '折扣卡'">
            折扣卡
          </div>
        </div>
        <div class="discount-block" v-show="item.promotion.cardPromotionTag">
          <img src="../assets/img//card.png" alt="" />
          <div class="discount-label-text">
            {{ item.promotion.cardPromotionTag }}
          </div>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "Cinema",
  data() {
    return {
      yingyuan: [],
    };
  },
  computed: {
    cityId() {
      return this.$store.state.cityObj.id;
    },
  },
  async created() {
    let res = await this.$axios.get(
      "/ajax/moreCinemas?movieId=0&day=2022-07-20&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1658296193065&cityId=" +
        this.cityId +
        "&optimus_uuid=4BD02870EB8A11EC9484CD3F2669A797DC32D9AD09E2495099517F7338AC2AD0&optimus_risk_level=71&optimus_code=10"
    );
    this.yingyuan = res.data.cinemas.cinemas;
  },
};
</script>

<style scoped>
.list-wrap1 .item {
  width: 9.6rem;
  height: auto;
  margin-left: 0.4rem;
}

.list-wrap1 {
  width: 10rem;
  height: auto;
  padding-top: 205px;
  /* margin-top: 300px; */
}

.title-block {
  width: 9.2rem;
  height: auto;
  padding-left: 13px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.title-line {
  width: 9.2rem;
  height: 23px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-ellipsis {
  width: 9.2rem;
  height: 20px;
  color: #666;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-block {
  width: 9.2rem;
  height: 17px;
  margin: 4px 0px;
}

.discount-block {
  width: 100%;
  height: 21px;
  position: relative;
  margin-top: 7px;
}

.discount-block img {
  width: 15px;
  height: 14px;
  position: absolute;
  left: 0;
}

.title-line span:first-child {
  color: #000;
  font-size: 16px;
}

.title-line .price {
  font-size: 18px;
  color: #f03d37;
}

.title-line .q {
  color: #f03d37;
}

.allowRefund {
  width: 0.5333rem;
  height: 17px;
  display: inline-block;
  color: #589daf;
  border: 0.02rem solid #589daf;
  text-align: center;
}

.endorse {
  width: 0.8533rem;
  height: 17px;
  display: inline-block;
  color: #589daf;
  border: 0.02rem solid #589daf;
  text-align: center;
  margin-left: 5px;
}

.snack {
  display: inline-block;
  text-align: center;
  color: #f90;
  border: 0.02rem solid #f90;
  width: 0.8533rem;
  height: 17px;
  margin-left: 0.1333rem;
}

.vipTag {
  width: 1.1733rem;
  height: 17px;
  display: inline-block;
  text-align: center;
  color: #f90;
  border: 0.02rem solid #f90;
  margin-left: 5px;
}

.discount-label-text {
  width: 5.2rem;
  height: 18px;
  display: inline-block;
  color: #999;
  font-size: 12px;
  position: absolute;
  left: 16px;
}
</style>